import type { FC } from 'react'
import React, { memo, useCallback, useMemo } from 'react'
import { useDrop } from 'react-dnd'
import { useDispatch, useSelector } from 'react-redux';
import { Card } from './Card'
import { ItemTypes } from './ItemTypes'
import { selectCommand, moveCommands } from '@/actions'
const style = {
    width: 400,
}

export interface ContainerState {
    cards: any[]
}

export const Container: FC = memo(function Container() {
    const dispatch = useDispatch()
    const cards = useSelector((state: any) => state.editor.editing.commands)
    // 修改id
    // const cards = useMemo(() => commands.map((item: any) => ({ ...item, id: item.id || Math.random() })), [commands])

    const setCards = (data: any[], index: number, atIndex: number) => {
        // dispatch({
        //     type: 'UPDATE_COMMANDS',
        //     data
        // })
        // dispatch(selectCommand(atIndex, true))
        dispatch(moveCommands(index, atIndex))
    }

    const moveCard = useCallback(
        (originalIndex: number, atIndex: number) => {
            // const newCards = [...cards];
            // newCards.splice(originalIndex, 1)
            // newCards.splice(atIndex, 0, cards[originalIndex])
            setCards([], originalIndex, atIndex)
        },
        [cards, setCards],
    )

    // const [, drop] = useDrop(() => ({ accept: ItemTypes.CARD }))
    return (
        <div style={style}>
            {cards.map((card: any, index: number) => (
                <Card
                    key={card.id}
                    text={card.cmd}
                    moveCard={moveCard}
                    index={index}
                />
            ))}
        </div>
    )
})
